<template>
	<view class="wrapper">
		<view class="upload">
			<view class="upload-title">营业执照</view>
			<view v-if="!form.business_license" class="upload-item" @click="uploadImg('business_license')">
				<view class="upload-item-left">
					<view class="upload-item-left-name">营业执照</view>
					<view class="upload-item-left-text">上传您的营业执照</view>
				</view>
				<view class="upload-item-right">
					<image src="/package-purse/static/images/hostedCertification1.png" mode=""></image>
				</view>
			</view>
			<view v-else class="upload-imgBox" @click="uploadImg('business_license')">
				<image class="" :src="form.business_license" mode=""></image>
			</view>
		</view>
		<view class="upload">
			<view class="upload-title">经营者身份证</view>
			<view v-if="!form.id_card_front" class="upload-item" @click="uploadImg('id_card_front')">
				<view class="upload-item-left">
					<view class="upload-item-left-name">身份证头像面</view>
					<view class="upload-item-left-text">上传您的身份证头像面</view>
				</view>
				<view class="upload-item-right">
					<image src="/package-purse/static/images/hostedCertification2.png" mode=""></image>
				</view>
			</view>
			<view v-else class="upload-imgBox" @click="uploadImg('id_card_front')">
				<image class="" :src="form.id_card_front" mode=""></image>
			</view>
			<view v-if="!form.id_card_back" class="upload-item" @click="uploadImg('id_card_back')">
				<view class="upload-item-left">
					<view class="upload-item-left-name">身份证国徽面</view>
					<view class="upload-item-left-text">上传您的身份证背面</view>
				</view>
				<view class="upload-item-right">
					<image src="/package-purse/static/images/hostedCertification3.png" mode=""></image>
				</view>
			</view>
			<view v-else class="upload-imgBox" @click="uploadImg('id_card_back')">
				<image class="" :src="form.id_card_back" mode=""></image>
			</view>
		</view>
		<view class="form">
			<view class="form-item">
				<view class="form-item-label">公司名称</view>
				<view class="form-item-value">
					<u-input
						placeholder="请输入公司名称"
						:placeholderStyle="{
							color: 'rgba(153, 153, 153, 0.6)',
							fontSize: '24rpx'
						}"
						color="#2c2e2e"
						fontSize="28rpx"
						inputAlign="right"
						border="none"
						v-model="form.company_name"
					></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">统一社会信用代码</view>
				<view class="form-item-value">
					<u-input
						placeholder="请输入统一社会信用代码"
						:placeholderStyle="{
							color: 'rgba(153, 153, 153, 0.6)',
							fontSize: '24rpx'
						}"
						color="#2c2e2e"
						fontSize="28rpx"
						inputAlign="right"
						border="none"
						v-model="form.unified_social_credit_code"
					></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">姓名</view>
				<view class="form-item-value">
					<u-input
						placeholder="请输入姓名"
						:placeholderStyle="{
							color: 'rgba(153, 153, 153, 0.6)',
							fontSize: '24rpx'
						}"
						color="#2c2e2e"
						fontSize="28rpx"
						inputAlign="right"
						border="none"
						v-model="form.name"
					></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">手机号</view>
				<view class="form-item-value">
					<u-input
						placeholder="请输入11位手机号码"
						:placeholderStyle="{
							color: 'rgba(153, 153, 153, 0.6)',
							fontSize: '24rpx'
						}"
						color="#2c2e2e"
						fontSize="28rpx"
						inputAlign="right"
						border="none"
						v-model="form.phone"
					></u-input>
				</view>
			</view>
			<view class="form-item">
				<view class="form-item-label">身份证号</view>
				<view class="form-item-value">
					<u-input
						placeholder="请输入身份证号"
						:placeholderStyle="{
							color: 'rgba(153, 153, 153, 0.6)',
							fontSize: '24rpx'
						}"
						color="#2c2e2e"
						fontSize="28rpx"
						inputAlign="right"
						border="none"
						v-model="form.id_card_number"
					></u-input>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">提交</view>
	</view>
</template>

<script>
import { trusteeship } from '@/api';
export default {
	data() {
		return {
			form: {
				company_name: '', // 公司名称
				unified_social_credit_code: '', //统一社会信用代码
				name: '', // 姓名
				id_card_number: '', // 身份证号
				phone: '', //手机号
				id_card_front: '', // 身份证头像面
				id_card_back: '', // 身份证国徽面
				business_license: '' // 营业执照
			}
		};
	},
	methods: {
		async submit() {
			// 公司名称验证
			if (!this.form.company_name.trim()) {
				uni.showToast({
					icon: 'none',
					title: '请输入公司名称'
				});
				return;
			}

			// 统一社会信用代码验证
			if (!this.form.unified_social_credit_code.trim()) {
				uni.showToast({
					icon: 'none',
					title: '请输入统一社会信用代码'
				});
				return;
			}
			if (this.form.unified_social_credit_code.trim().length !== 18) {
				uni.showToast({
					icon: 'none',
					title: '统一社会信用代码应为18位'
				});
				return;
			}

			// 姓名验证
			if (!this.form.name.trim()) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				});
				return;
			}

			// 手机号验证
			if (!this.form.phone.trim()) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				});
				return;
			}
			// 手机号正则验证（11位数字，以1开头）
			const phoneReg = /^1[3-9]\d{9}$/;
			if (!phoneReg.test(this.form.phone.trim())) {
				uni.showToast({
					icon: 'none',
					title: '请输入有效的11位手机号'
				});
				return;
			}
			// 身份证号验证
			if (!this.form.id_card_number.trim()) {
				uni.showToast({
					icon: 'none',
					title: '请输入身份证号'
				});
				return;
			}
			const idCardReg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if (!idCardReg.test(this.form.id_card_number.trim())) {
				uni.showToast({
					icon: 'none',
					title: '请输入有效的身份证号'
				});
				return;
			}

			// 营业执照验证
			if (!this.form.business_license) {
				uni.showToast({
					icon: 'none',
					title: '请上传营业执照'
				});
				return;
			}
			
			// 身份证头像面验证
			if (!this.form.id_card_front) {
				uni.showToast({
					icon: 'none',
					title: '请上传身份证头像面'
				});
				return;
			}

			// 身份证国徽面验证
			if (!this.form.id_card_back) {
				uni.showToast({
					icon: 'none',
					title: '请上传身份证国徽面'
				});
				return;
			}

			// 所有验证通过，提交表单
			const res = await trusteeship.applyTrusteeship(this.form);
			if (res.code === 200) {
				uni.showToast({
					title: '提交成功'
				});
				uni.navigateBack();
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg || '提交失败'
				});
			}
		},
		/* 修改头像 */
		uploadImg(type) {
			let self = this;
			let params = {
				token: uni.getStorageSync('token'),
				app_id: 10001
			};
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera '], //从相册选择
				success(res) {
					uni.showLoading({
						title: '上传中'
					});
					let imageList = res.tempFilePaths;
					uni.uploadFile({
						url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
						filePath: imageList[0],
						fileType: 'image',
						name: 'iFile',
						formData: params,
						success(data) {
							let image = JSON.parse(data.data);
							if (type == 'business_license') {
								self.form.business_license = image.data.file_path;
							} else if (type == 'id_card_front') {
								self.form.id_card_front = image.data.file_path;
							} else {
								self.form.id_card_back = image.data.file_path;
							}
							uni.hideLoading();
						}
					});
				},
				fail() {
					uni.hideLoading();
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 20rpx 0 80rpx 0;
}
.upload {
	background-color: #fff;
	padding: 0rpx 30rpx 30rpx;
	&-title {
		padding-top: 30rpx;
		padding-left: 16rpx;
		font-family: 'PingFang SC';
		font-weight: bold;
		font-size: 38rpx;
		color: #2c2e2e;
	}
	&-imgBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 301rpx;
		padding: 0 50rpx 0 44rpx;
		margin-top: 22rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	&-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 301rpx;
		background: #fff3ef;
		border-radius: 20rpx;
		padding: 0 50rpx 0 44rpx;
		margin-top: 22rpx;

		&-left {
			&-name {
				font-family: 'PingFang SC';
				font-weight: bold;
				font-size: 30rpx;
				color: #2c2e2e;
			}
			&-text {
				margin-top: 26rpx;
				font-family: 'PingFang SC';
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		}
		&-right {
			image {
				width: 300rpx;
				height: 197rpx;
			}
		}
	}
}
.form {
	background-color: #fff;
	margin-top: 26rpx;
	padding: 40rpx;
	&-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 60rpx;
		&-label {
			font-family: 'PingFang SC';
			font-weight: bold;
			font-size: 28rpx;
			color: #2c2e2e;
		}
		&-value {
			min-width: 60%;
		}
	}
	&-item:last-child {
		margin-bottom: 0;
	}
}
.btn {
	margin: 66rpx 35rpx 0;
	height: 89rpx;
	background: #ff4400;
	border-radius: 44rpx 44rpx 45rpx 45rpx;
	font-family: 'PingFang SC';
	font-weight: bold;
	font-size: 36rpx;
	color: #ffffff;
	text-align: center;
	line-height: 89rpx;
}
</style>
